<template>
  <div>
    <div style="margin-bottom: 10px">
      <label style="margin-left: 10px">关键字:</label>
      <Input style="width: 150px;margin-left: 6px;" icon="search" type="text" v-model="searchInput"
             placeholder="关键字查询..." clearable/>
      <Button type="ghost" @click="searchClick">查询</Button>
    </div>

    <Table :loading="loading" stripe :columns="columns" :data="data"></Table>

    <div style="margin: 10px;overflow: hidden">
      <div style="float: right;">
        <Page :page-size="pageConfig.size" :total="pageConfig.max" :current="pageConfig.currentPage"
              @on-change="changePage"></Page>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: "SelectArticle",
    data() {
      return {
        searchInput: '',
        loading: false,
        columns: [
          {
            title: '序号',
            type: 'index'
          },
          {
            title: '标题',
            key: 'title'
          },
          {
            title: '创建时间',
            key: 'createTime',
            sortable: true
          },
          {
            title: '操作',
            render: (h, params) => {
              return h('Button', {
                props: {
                  type: 'info'
                },
                on: {
                  click: () => {
                    let index = params.index;
                    let id = this.data[index].id;
                    let title = this.data[index].title;
                    let state = false;
                    this.selectedList.forEach(item => {
                      if (item.id == id) {
                        state = true;
                        return;
                      }
                    });
                    if (state == false) {
                      this.selectedList.push({id, title});
                      this.data.splice(index, 1);
                      this.$Message.success("添加成功");
                    }
                  }
                }
              }, "添加")
            }
          }
        ],
        data: [],
        pageConfig: {
          size: 5,
          currentPage: 0,
          max: 0,
          url: '/get-article-all',
          key: ''
        },
        selectedList: []
      }
    },
    methods: {
      searchClick() {  //查询的点击事件
        if (this.searchInput.length == 0) {
          this.$Message.warning('是不是忘记了输入?');
        } else {
          this.pageConfig.key = this.searchInput;
          this.replaceAll(1, this.pageConfig.key, null);
        }
      },
      changePage(page) {   //页码切换
        this.replaceAll(page, this.pageConfig.key, null);
      },
      replaceAll(page, key, sortId) {  //此方法传入参数即可进行请求
        this.data.length = 0;
        this.loading = true;
        this.http.get(this.pageConfig.url, {
          isSplit: true,
          page: page,
          size: this.pageConfig.size,
          key: key,
          sortId: sortId
        }, data => {
          let list = data.list;
          this.pageConfig.currentPage = data.pageNum;
          this.pageConfig.max = data.total;
          list.forEach(item => {
            let data = {
              title: item.article.title,
              createTime: item.article.createtime,
              commentCount: item.commentCount,
              readCount: item.article.readcount,
              top: item.article.top,
              id: item.article.id,
              sortName: item.article.sortName
            };
            this.data.push(data);
          });
          this.loading = false;
        });
      }
    }
  }
</script>

<style scoped>

</style>
